<template>
  <div class="page-container">
    <el-container>
      <!-- 左侧添加部分 -->
      <el-aside width="1000px" class="left-wrap">
        <div class="item">
          <div class="editor-container">
            <div class="editor-header"></div>
            <div class="editor-main-container" :style="'height:'+(HEIGHT-114)+'px'">
              <!-- 模块部分 -->
              <div class="view">
                <div class="img" v-for="(item,index) in selectedList" :key="index" :data-id="item.moduleId"
                     @click="getModuleData(item)">
                  <img :src="item.previewImg" alt/>
                  <div class="edit">
                    <span class="delete" @click.stop="deleteItem(item)">删除</span>
                    <span class="up" v-if="selectedList.length>1 && index != 0" @click.stop="upItem(item)">上移</span>
                    <span class="down" v-if="selectedList.length>1 && index != selectedList.length-1"
                          @click.stop="downItem(item)">下移</span>
                  </div>
                </div>
              </div>
              <!-- 点击模板,新增模块 -->
              <div class="edit-button-container">
                <div
                  class="edit-button"
                  v-for="item in totalList"
                  :key="item.id"
                  :data-id="item.id"
                >
                  <a href="javascript:" @click="addTemplate(item)">{{ item.name }}</a>
                  <img :src="item.previewImg" class="edit-image"/>
                </div>
              </div>
            </div>
          </div>

        </div>
      </el-aside>

      <!-- 右侧配置部分  -->
      <el-main>

        <div class="view" style="margin: 10px 10px 10px 10px">
          <a>整体页面配置名称</a><el-input label="页面配置名称" placeholder="请输入配置方案名称" v-model="title">页面配置名称</el-input>
        </div>

        <div class="save-wrap">
          <el-button type="primary" class="common-save" @click="saveIndex">总保存</el-button>
          <el-button type="primary" class="common-save" @click="previewIndex">预览</el-button>
          <el-button type="primary" class="common-save" @click="back">返回</el-button>
        </div>

        <!--右侧多图编辑区域-->
        <!--1.轮播图--><!--2.轮播广告--><!--9.单图广告-->
        <!-- <div
          v-if="moduleData.code == 'PC_CYCLE_PICTURE' || moduleData.code == 'PC_CYCLE_AD' || moduleData.code == 'PC_SINGLE_IMG_AD'">
          <moreImages :moduleId="moduleData.cmsModuleId"
                      :moduleCode = "moduleData.code"
                      :fileList="moduleData.variables.imgUlrList"
                      :MoreMapDialogVisible="MoreMapDialogVisible"
                      @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                      @getIndex="getIndex"></moreImages>
        </div> -->

        <div
          v-if="moduleData.code == 'PC_CYCLE_PICTURE' || moduleData.code == 'PC_CYCLE_AD' || moduleData.code == 'PC_SINGLE_IMG_AD'">
          <haierBanner :moduleData="moduleData" :moduleId="moduleData.moduleId"></haierBanner>
        </div>

        <!--3.主题品牌-->
        <div v-if="moduleData.code == 'PC_MAIN_THEME_BRAND'">
          <pcMainThemeBrand :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcMainThemeBrand>
        </div>

        <!--4.主题大图-->
        <div v-if="moduleData.code == 'PC_MAIN_THEME_BIG_IMG'">
          <pcMainThemeBigImg :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcMainThemeBigImg>
        </div>

        <!--5.主题排行榜-->
        <div v-if="moduleData.code == 'PC_MAIN_THEME_SORT'">
          <pcMainThemeSort :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcMainThemeSort>
        </div>

        <!--6.轮播产品-->
                
        <div v-if="moduleData.code == 'PC_CYCLE_PRO'">
          <pcCyclePro :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcCyclePro>
        </div>

        <!--7.主题类目-->
                
        <div v-if="moduleData.code == 'PC_MAIN_THEME_CATEGORY'">
          <pcMainThemeCategory :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcMainThemeCategory>
        </div>

        <!--8.限时购-->
        <div v-if="moduleData.code == 'PC_RUSH_BUY'">
          <pcRushBuy :moduleData="moduleData" :moduleId="moduleData.moduleId"></pcRushBuy>
        </div>

        <!--添加商品模块-->
        <div v-show="moduleData.code == 'PC_MAIN_THEME_BRAND'
         || moduleData.code == 'PC_MAIN_THEME_BIG_IMG'
        || moduleData.code == 'PC_CYCLE_PRO'
        || moduleData.code == 'PC_MAIN_THEME_CATEGORY'
        || moduleData.code == 'PC_MAIN_THEME_SORT'
        ">
          <div class="productProduct">
            <el-button type="success" @click="showProductList">添加商品 </el-button>
          </div>
          <div class="table-section">
            <el-table :data="productListData"
                      v-loading="productListloading"
                      :header-cell-style="tableHeaderColor"
                      ref="multipleTable"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      border
                      :size="size">
              <el-table-column prop="productId" label="ID" sortable align="center"></el-table-column>
              <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
            </el-table>
          </div>
          <productListTemplate @getModuleProductList="getModuleProductList"
                               :moduleId="moduleData.cmsModuleId"
                               :type="0"
                               :productListTemplateVisible="productListTemplateVisible"
                               @productListTemplateVisibleFun="productListTemplateVisibleFun">

          </productListTemplate>
        </div>


        <!--添加商品模块-->
        <div v-show="moduleData.code == 'PC_MAIN_THEME_SORT'">
          <div class="productProduct">
            <el-button type="success" @click="showProductListSort">添加排行榜里的商品 </el-button>
          </div>
          <div class="table-section">
            <el-table :data="productListDataSort"
                      v-loading="productListloading"
                      :header-cell-style="tableHeaderColor"
                      ref="multipleTable"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      border
                      :size="size">
              <el-table-column prop="productId" label="ID" sortable align="center"></el-table-column>
              <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
            </el-table>
          </div>
          <productListTemplate @getModuleProductList="getModuleProductListSort"
                               :moduleId="moduleData.cmsModuleId"
                               :type="1"
                               :productListTemplateVisible="productListTemplateVisibleSort"
                               @productListTemplateVisibleFun="productListTemplateVisibleFunSort">

          </productListTemplate>
        </div>

      </el-main>
    </el-container>

    <!-- 预览弹窗 -->
    <el-dialog
      title="首页配置预览"
      :visible.sync="previewDialogVisible"
      width="1600px"
      :before-close="ClosePreviewDialog">
      <div class="preview-wrap">

        <!-- 1.轮播图 -->
        <div class="wrap indexSwipers" v-for="(item,index) in sortList" :key="index + '-1'" :style="{'order': item.sort}">
          <template v-if="item.variablesObject">
            <indexSwipers v-if="item.code == 'PC_CYCLE_PICTURE'" :variablesObject="item.variablesObject"></indexSwipers>
          </template>
        </div>

        <!--2.轮播广告-->
        <div class="wrap pcInfoSwiper" v-for="(item,index) in sortList" :key="index + '-2'" :style="{'order': item.sort}">
          <template v-if="item.variablesObject">
            <pcInfoSwiper v-if="item.code == 'PC_CYCLE_AD'" :variablesObject="item.variablesObject"></pcInfoSwiper>
          </template>
        </div>

        <!-- 3.主题品牌 -->
        <div class="wrap pcMother" v-for="(item,index) in sortList" :key="index + '-3'" :style="{'order': item.sort}">
          <pcMother v-if="item.code == 'PC_MAIN_THEME_BRAND'" :variablesObject="item.variablesObject" :list="item.cmsProductList"></pcMother>
        </div>

        <!--4.主题大图-->
        <div class="wrap pcMakeups" v-for="(item,index) in sortList" :key="index + '-4'" :style="{'order': item.sort}">
          <pcMakeups v-if="item.code == 'PC_MAIN_THEME_BIG_IMG'" :variablesObject="item.variablesObject" :list="item.cmsProductList"></pcMakeups>
        </div>

        <!--5.主题排行榜-->
        <div class="wrap protection" v-for="(item,index) in sortList" :key="index + '-5'" :style="{'order': item.sort}">
          <protection v-if="item.code == 'PC_MAIN_THEME_SORT'" :variablesObject="item.variablesObject" :list="item.cmsProductList"></protection>
        </div>

        <!--6.轮播产品-->
        <div class="wrap pcKelly" v-for="(item,index) in sortList" :key="index + '-6'" :style="{'order': item.sort}">
          <pcKelly v-if="item.code == 'PC_CYCLE_PRO'" :variablesObject="item.variablesObject" :list="item.cmsProductList"></pcKelly>
        </div>

        <!--7.主题类目-->
        <div class="wrap pcFavorite" v-for="(item,index) in sortList" :key="index + '-7'" :style="{'order': item.sort}">
          <pcFavorite v-if="item.code == 'PC_MAIN_THEME_CATEGORY'" :variablesObject="item.variablesObject" :list="item.cmsProductList"></pcFavorite>
        </div>

        <!--8.限时购-->
        <div class="wrap seckill" v-for="(item,index) in sortList" :key="index + '-8'" :style="{'order': item.sort}">
          <seckill v-if="item.code == 'PC_RUSH_BUY'" :list="timeList"></seckill>
        </div>

        <!--9.单图广告-->
        <div class="wrap imgs" v-for="(item,index) in sortList" :key="index + '-9'" :style="{'order': item.sort}">
          <imgs v-if="item.code == 'PC_SINGLE_IMG_AD'" :variablesObject="item.variablesObject"></imgs>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="previewDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  // 引入添加(编辑)模板组件 addImage
  import moreImages from ".././component/pcSinglImageUploadTemplate";
  import haierBanner from ".././component/haierBanner"
  import productListTemplate from ".././component/pcProductListTemplate"
  //编辑组件
  import pcMainThemeBrand from ".././component/pcMainThemeBrand";//母婴
  import pcMainThemeBigImg from ".././component/pcMainThemeBigImg";//主题大图
  import pcMainThemeSort from ".././component/pcMainThemeSort";//排行榜
  import pcCyclePro from ".././component/pcCyclePro";//轮播产品
  import pcMainThemeCategory from ".././component/pcMainThemeCategory";//主题类目
  import pcRushBuy from ".././component/pcRushBuy";//限时购
  //预览弹框组件
  import indexSwipers from ".././component/pcIndexSwiper"; //弹框 轮播图
  import pcInfoSwiper from ".././component/pcInfoSwiper";//弹框 轮播广告
  import pcMother from ".././component/pcMother";//弹框 母婴
  import pcMakeups from ".././component/pcMakeups";//弹框 主题大图
  import protection from ".././component/pcProtection";//弹框 排行榜
  import pcKelly from ".././component/pcKelly";//弹框 轮播
  import pcFavorite from ".././component/pcFavorite";//弹框 主题类目
  import seckill from ".././component/seckill";//弹框 限时购
  import imgs from ".././component/imgs";//弹框 限时购

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
      indexSwipers,
      moreImages,
      haierBanner,
      productListTemplate,
      pcMainThemeBrand,
      pcMainThemeBigImg,
      pcMainThemeSort,
      pcCyclePro,
      pcMainThemeCategory,
      pcRushBuy,
      pcInfoSwiper,
      pcMother,
      protection,
      seckill,
      pcKelly,
      pcMakeups,
      pcFavorite,
      imgs
    },
    data() {
      return {
        pageId: this.$route.query.id,//页面的Id
        selectedList: [],
        sortList: [],                               // 首页配置数据
        previewDialogVisible: false,                // 是否显示预览弹窗
        totalList: [],                              // 模板数据
        size: "small",                              // form表单尺寸
        SinglEMapDialogVisible: false,               //单图弹框是否展示
        MoreMapDialogVisible: false,                 //多图弹框是否展示
        moduleNameDialogVisible: false,               //标题弹框是否展示
        productListData: [],                         // 商品List
        productListDataSort: [],                         // 商品List
        productListloading: false,                  //商品表格加载List
        productListTemplateVisible: false,          //商品弹窗是否显示
        productListTemplateVisibleSort: false,          //商品弹窗是否显示
        title: 'PC整体装修配置方案名称',
        moduleData: {
        },
        HEIGHT: window.innerHeight, //昨天模板高度
        timeList: [],
        week: [
          { msg: "00:00-04:00" },
          { msg: "04:00-08:00" },
          { msg: "8:00-12:00" },
          { msg: "12:00-16:00" },
          { msg: "16:00-20:00" },
          { msg: "20:00-24:00" }
        ]
      };
    },

    /**
     * 页面初始化加载
     */
    mounted() {
      // 获取首页已经配置数据
      this.getIndex();
      this.getBottomData();
      this.queryTimeSkillGoodsListFun();
    },

    methods: {

      /**
       * TODO 17.编辑选中模块的内容
       * @param item
       */
      getModuleData(item) {
        this.moduleData = {};

        //轮播图
        if (item.code === 'PC_CYCLE_PICTURE') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
        }
        //轮播广告
        else if (item.code === 'PC_CYCLE_AD') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
        }
        //主题品牌
        else if (item.code === 'PC_MAIN_THEME_BRAND') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
          this.getModuleProductList(item);
        }
        //主题大图
        else if (item.code === 'PC_MAIN_THEME_BIG_IMG') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
          this.getModuleProductList(item);
        }
        //主题排行榜
        else if (item.code === 'PC_MAIN_THEME_SORT') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
          this.getModuleProductList(item);
          this.getModuleProductListSort(item);
        }
        //轮播产品
        else if (item.code === 'PC_CYCLE_PRO') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
          this.getModuleProductList(item);
        }
        //主题类目
        else if (item.code === 'PC_MAIN_THEME_CATEGORY') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
          this.getModuleProductList(item);
        }
        //限时购
        else if (item.code === 'PC_RUSH_BUY') {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
        }
        //单图广告
        else if (item.code === "PC_SINGLE_IMG_AD") {
          this.MoreMapDialogVisible = true;
          this.getCmsModuleTemplateFun(item);
        }
      },

      /**
       * 1.获取模板
       */
      getBottomData() {
        const params = {
          platform: 2,
        };
        this.utils.request.cmsTemplateListAll(params, res => {
          this.totalList = res.data;
        })
      },

      /**
       * 2.根据pageId,获取所有保存的模板,获取已经配置的cms_module 和 cms_module_template;
       */
      getIndex() {
        const params = {
          pageId: this.pageId
        };
        let this_ = this;
        this_.utils.request.getIndexData(params, res => {
          if(res.data){
            if (res.data.pageModuleResponseList && res.data.pageModuleResponseList.length > 0) {
              //  判断数据进行回显
              this_.sortList = res.data.pageModuleResponseList;
              this_.selectedList = res.data.pageModuleResponseList;
              this_.title = res.data.title;
            } else {
              //  判断数据进行回显
              this_.sortList = [];
              this_.selectedList = [];
              this_.title = res.data.title;
            }
          }
        })

      },
      queryTimeSkillGoodsListFun(){
        let time = new Date().getHours(),
        startTime = "",
        endTime = "";
        this.week.forEach((e, index) => {
          let start = e.msg.split("-")[0].split(":")[0],
            end = e.msg.split("-")[1].split(":")[0];
          if (time < end && time >= start) {
            startTime = e.msg.split("-")[0];
            endTime = e.msg.split("-")[1];
          }
        });
        let year = new Date().getFullYear();
        let month = new Date().getMonth();
        let day = new Date().getDate();
        let sendData = {
          startTime:
            year +
            "-" +
            month.toString().padStart(2, "0") +
            "-" +
            day.toString().padStart(2, "0") +
            " " +
            startTime,
          endTime:
            year +
            "-" +
            month.toString().padStart(2, "0") +
            "-" +
            day.toString().padStart(2, "0") +
            " " +
            endTime
        };
       this.utils.request.queryTimeSkillGoodsList(sendData, res => {
          if(res.data){
            this.timeList = res.data;
          }
       })
      },


      /**
       * 3.添加模块, 传参是模板id 页面id  栏目id  addIndex
       */
      addTemplate(item) {
        const params = {
          templateCode: item.code,
          templateDataType: item.dataType,
          templateId: item.id,
          templateName: item.name,
          previewImg: item.previewImg,
          pageId: this.pageId,
          platform: 2,
        };
        let this_ = this;
        this.utils.request.addIndex(params, res => {
          if(res.data){
            // 先获取已编辑模块数据
            let data = {
              code: res.data.code,
              dataType: res.data.dataType,
              moduleId: res.data.moduleId,
              previewImg: res.data.previewImg,
              sort: res.data.sort,
              variables: res.data.variables
            };
            this_.selectedList.push(data);
            }
        })
      },
      /**
       * 4.删除对应的模块 deleteIndex  获取当前模块id，在已选择数据中将该模块删除
       * @param item
       */
      deleteItem(item) {
        const params = {
          moduleId: item.moduleId,
        };
        let this_ = this;
        this.utils.request.deleteIndex(params, res => {
          if (res.code === '0000') {
            this_.getIndex();
          }
        });
      },


      /**
       * 5.上移对应的模块 IndexMove
       * @param item
       */
      upItem(item) {
        let this_ = this;
        const params = {
          moduleId: item.moduleId
        };

        this.selectedList.forEach((s, index) => {
          if (s.moduleId === item.moduleId) {
            if (index !== 0) {
              params.toModuleId = this_.selectedList[index - 1].moduleId;
            }
          }
        });
        this.utils.request.IndexMove(params, res => {
          if (res.code === '0000') {
            this_.getIndex();
          }
        })
      },

      /**
       * 6.下移对应的模块 IndexMove
       * @param item
       */
      downItem(item) {
        let this_ = this;
        const params = {
          moduleId: item.moduleId
        };

        this.selectedList.forEach((s, index) => {
          if (s.moduleId === item.moduleId) {
            if (index !== this_.selectedList.length - 1) {
              params.toModuleId = this_.selectedList[index + 1].moduleId;
            }
          }
        });
        this.utils.request.IndexMove(params, res => {
          if (res.code === '0000') {
            this_.getIndex();
          }
        })
      },

      /**
       * 7.查询模板商品
       */
      getModuleProductList(item){
        this.utils.request.getIndexList({moduleId: item.moduleId,type:0}, res => {
          if (res.code === '0000') {
            this.productListData = res.data;
          }
        })
      },
      /**
       * 7.查询模板商品,type =1
       */
      getModuleProductListSort(item){
        this.utils.request.getIndexList({moduleId: item.moduleId,type:1}, res => {
          if (res.code === '0000') {
            this.productListDataSort = res.data;
          }
        })
      },

      /**
       * 8.保存模板编辑 IndexSave
       */
      saveIndex() {
        const params = {
          title: this.title,
          pageId: this.pageId,
        };
        // IndexSave
        this.utils.request.IndexSave(params, res => {
          // 跳转到配置列表页
          this.$message({message: "保存成功", type: "success"});
          this.$router.push("/Pages/Configuration/IndexShow");
        })
      },

      //返回上一页;
      back(){
        this.$router.push("/Pages/Configuration/IndexShow");
      },


      /**
       * 9.预览模板 请求接口赋值给 sortList
       */
      previewIndex() {
        const params = {
          pageId: this.pageId
        };
        this.utils.request.getIndexData(params, res => {
          if(res.data){
            this.sortList = res.data.pageModuleResponseList;
            this.previewDialogVisible = true;
          }
        })
      },

      /**
       * 10.弹窗显示
       */
      showProductList(){
        this.productListTemplateVisible = true;
      },
      /**
       * 10.弹窗显示
       */
      showProductListSort(){
        this.productListTemplateVisibleSort = true;
      },
      /**
       * 11.弹窗是否显示
       */
      productListTemplateVisibleFun(){
        this.productListTemplateVisible = false;
      },
      /**
       * 11.弹窗是否显示
       */
      productListTemplateVisibleFunSort(){
        this.productListTemplateVisibleSort = false;
      },

      /**
       * 12.table的双色条纹
       */
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

      /**
       * 13.修改table header的背景色
       */
      tableHeaderColor({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background-color:rgb(250,250,250);'
        }
      },
      /**
       * 14.单图上传弹窗
       */
      SinglEMapDialogVisibleFun(){
        this.SinglEMapDialogVisible = false;
      },
      /**
       * 15.多图上传弹窗
       */
      MoreMapDialogVisibleFun(){
        this.MoreMapDialogVisible = false;
      },
      /**
       * 16.多图上传弹窗
       */
      TitleMapDialogVisibleFun(){
        this.moduleNameDialogVisible = false;
      },

      /**
       * 18.关闭预览模板
       */
      ClosePreviewDialog() {
        this.previewDialogVisible = false;
      },


      /**
       * 19.获取模块对应的数据方法;
       * */
      getCmsModuleTemplateFun(item){
        let params = {};
        let this_ = this;
        params.moduleId = item.moduleId;
        this_.utils.request.getCmsModuleTemplate(params, res => {
          if (res !== null && res.code === "0000") {
            this_.moduleData = res ? res.data : {};
            if (res !== null && res.data !== null
              && res.data.variables !== null
              && res.data.variables !== ''
              && res.data.variables !== ""
            ) {
              this_.moduleData.variables = JSON.parse(res.data.variables);
              this_.moduleData.moduleId = item.moduleId;
            }
          } else {
            this_.$message({"message": res.msg, type: "error"});
            this_.moduleData = {moduleId:item.moduleId}
          }
        });
      },
    },


  };
</script>

<style lang="scss" scoped>
  .el-button {
    margin-bottom: 5px
  }

  .view {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    .img {
      border: 1px dashed red;
      position: relative;
      margin-bottom: 10px;
      img {
        max-width: 100%;
        height: 100%;
      }
      .edit {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: flex-end;
        span {
          display: block;
          color: #fff;
          text-decoration: none;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 6px 10px;
          margin: 1px 1px 0 0;
          cursor: pointer;
        }
      }
    }
  }

  .edit-button-container {
    width: 100%;
    padding-bottom: 60px;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .edit-button {
      position: relative;
      background-color: #39ac69;
      margin: 10px 15px;
      font-size: 12px;
      border-radius: 2px;
      a {
        display: block;
        padding: 5px 10px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        color: #fff;
        text-decoration: none;
      }
      .edit-image {
        display: none;
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 200px;
        display: none;
        z-index: 9999;
      }
    }
    .edit-button:hover .edit-image {
      display: block;
    }
  }

  .mtb20 {
    margin: 20px 0;
    text-align: left;
  }

  .productProduct {
    text-align: left;
  }
  .editor-main-container {
    overflow: auto;
  }
 .el-aside::-webkit-scrollbar{
   width: 10px;
   height: 1px;
  }
  .el-aside::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #4e738d;
  }
  .el-aside::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
  }
</style>

